<template>
  <el-dialog
    v-model="isShow"
    :title="handle.name + name"
    width="800"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form class="dialog-form" label-width="120px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动方式：" required>
            <el-select v-model="form.activitiesMethod" placeholder="请选择" clearable style="width:100%">
              <el-option v-for="(item,index) in optionData.activitieMethod" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动类型：" required>
            <el-select v-model="form.activitiesType" placeholder="请选择" filterable clearable style="width:100%">
              <el-option v-for="(item,index) in optionData.activitieType" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="所属公会：" required>
            <el-select v-model="form.guildId" placeholder="请选择" filterable clearable style="width:100%" @change="changeGuild" :disabled="handle.type == 'edit'">
              <el-option v-for="(item,index) in optionData.guildList" :key="index" :label="item.name" :value="item.guildId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动名称：" required>
            <el-input v-model="form.activitiesName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动时间：" required>
            <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"  placeholder="请选择" />
          </el-form-item>
        </el-col>
        <template v-if="form.activitiesMethod == '1'">
        <el-col :xs="24" :sm="12">
          <el-form-item label="选择城市：" required>
            <el-select v-model="form.abcode" placeholder="请选择" filterable clearable style="width:100%">
              <el-option v-for="(item,index) in optionData.cityList" :key="index" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动地址：" required>
            <el-input v-model="form.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="现场签到：">
            <el-radio-group v-model="form.isCheckinRequired">
              <el-radio v-for="(item,index) in optionData.yesnoType" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="地址经纬度：" required>
            <el-input v-model="form.location" placeholder="选择经纬度后，粘贴在此"><template #append><span @click="refGetLocation.init()">选择经纬度</span></template></el-input>
          </el-form-item>
        </el-col>        
      </template>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动人数：" required>
            <el-input v-model="form.maxParticipants" type="number" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="报名金额：" required>
            <el-input v-model="form.amount" type="number" placeholder="请输入"  :disabled="handle.type == 'edit'" />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="活动详情：" required>
            <el-input v-model="form.description" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="推荐语&备注：" required>
            <el-input v-model="form.recommendations" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="讨论问题1：" required>
            <el-input v-model="form.discussionQuestions1" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="讨论问题2：" required>
            <el-input v-model="form.discussionQuestions2" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="讨论问题3：" required>
            <el-input v-model="form.discussionQuestions3" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动封面：" required>
            <ImageUpload v-model:imageUrl="form.coverImageUrl"></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="活动群二维码：" required>
            <ImageUpload v-model:imageUrl="form.groupQrcodeUrl"></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="个人二维码：" required>
            <ImageUpload v-model:imageUrl="form.organizerWechatQrcodeUrl"></ImageUpload>
          </el-form-item>
        </el-col>
        
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="toSubmit">确定</el-button>
      </span>
    </template>
    <get-location ref="refGetLocation" />
  </el-dialog>
</template>

<script setup lang="ts">
const GetLocation = defineAsyncComponent(() => import('./GetLocation.vue'));
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useAddEdit } from '/@/assets/compositionFn/addEdit';
const refGetLocation = ref();
const obj = {
  api: '/admin/activities/pcSave',
  initForm:{
    "id": null,
    "startTime": "",
    "coverImageUrl": "",
    "activitiesName": "",
    "activitiesMethod": "",
    "activitiesMethodName": "",
    "platform": "",
    "maxParticipants": null,
    "groupQrcodeUrl": "",
    "organizerWechatQrcodeUrl": "",
    "description": "",
    "recommendations": "",
    "activitiesType": null,
    "activitiesTypeName": '',
    "discussionQuestions1": "",
    "discussionQuestions2": "",
    "discussionQuestions3": "",
    "abcode": "",
    cityName: null,
    "address": "",
    "checkinAddress": "",
    "isCheckinRequired": 1,
    "initiatorUserId": null,
    "guildId": null,
    guildIdName: null,
    "approverUserId": null,
    "status": 0 ,
    "latitude": null,
    "longitude": null,
    "amount": 0,
    location: null,
  },
};
let {isShow, btnLoading, handle, optionData, form, init, returnInfo, handleClose, submitForm} = useAddEdit(obj);
const emit = defineEmits(['confirm']);
const {proxy} :any = getCurrentInstance();
const prop = defineProps({
  name: {
    type: String,
  }
});
let maxParticipants = ref();
watch(isShow,(newVal, oldVal) => {
  if(newVal){
    //弹窗后的其他操作
    let info = returnInfo();
    if(handle.type == 'edit'){
      maxParticipants.value = info.maxParticipants;
      form.activitiesMethod = Number(info.activitiesMethod);
      form.activitiesType = Number(info.activitiesType);
      form.isCheckinRequired = Number(info.isCheckinRequired);
      form.location = form.latitude + ','+form.longitude ;
      handle.methods = 'post';
    }
  }else{
    
  }
});
const changeGuild = (val) => {
  proxy.$request('get', '/admin/guilds/'+val, {}, (data,msg) => {
    form.initiatorUserId = data.leaderId;
  })
};
const verifyForm = ()=>{
  if(!proxy.$verify.null(form.activitiesMethod, '请选择活动方式')){
        return false;
    }
    if(!proxy.$verify.null(form.activitiesType, '请选择活动类型')){
        return false;
    }
    if(!proxy.$verify.null(form.activitiesName, '请填写活动名称')){
        return false;
    }
    if(!proxy.$verify.null(form.startTime, '请选择活动时间')){
        return false;
    }
    if(form.activitiesMethod == '1'){
      if(!proxy.$verify.null(form.abcode, '请选择城市')){
          return false;
      }
      if(!proxy.$verify.null(form.address, '请选择活动地址')){
          return false;
      }
      if(!proxy.$verify.null(form.location, '请选择经纬度')){
        return false;
      }
      let location = form.location.split(',');
      form.latitude = location[0];
      form.longitude = location[1];
    }else{
      form.abcode = '';
      form.address = '';
      form.isCheckinRequired = 0;
      form.location = '';
      form.latitude = '';
      form.longitude = '';
    }
    if(!proxy.$verify.null(form.coverImageUrl, '请上传活动封面')){
        return false;
    }
    if(!proxy.$verify.null(form.description, '请填写活动详情')){
        return false;
    }
    // if(handle.type == 'edit'){
    //   if(Number(form.maxParticipants < Number(maxParticipants.value))){
    //     ElMessage.warning('报名人数不能小于之前的' + maxParticipants.value);
    //     return false;
    //   }
    // }
    // if(Number(form.amount) <= 0){
    //   ElMessage.warning('报名金额不能小于0');
    //     return false;
    // }
    
  return true;
};
const toSubmit = ()=>{
  if(!verifyForm()){
    return;
  }
  submitForm().then(res => {
    emit('confirm');
  });
  
}
defineExpose({
  init,
})
</script>

<style>

</style>